﻿@{
    ViewBag.Title = "产品详情";
    var product =ViewData["product"] as Pay.DTO.product_dto;
    var domain = ViewData["url"] as string;
    var share_url = ViewData["share_url"] as string;
    var merchant_no = ViewData["merchant_no"] as string;
    var list = ViewData["list"] as Pay.TO.PagedResult<Pay.DTO.product_dto>;
    var img = domain + product.first_image;
    var is_login = HttpContext.Current.User.Identity.IsAuthenticated;
}
<html>

<head>
    <meta charset="UTF-8">
    <title>@product.name</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/gelunbu.css" />

</head>

<body style="background: #F0F0F0;">
    <!--商品详情轮播-->
	@if(is_login){
		<span class="fx">
        	<img src="~/Content/images/fx.png" alt="">
	    </span>
	    <div class="black none"></div>
	    <div class="popFx trans_5">
	        <div class="popView">
	            <div class="top">
	                <i class="close"></i>
	                <img src="/product/ImageMerge?product_id=@product.id&merchant_no=@merchant_no" alt="">
	            </div>
	        </div>
	        <div class="tbnBox">
	            <a class="btn j-copy" href="#">复制商品链接</a>
	            <a class="btn" href="/product/ImageMerge?product_id=@product.id&merchant_no=@merchant_no" download="@(string.Format("{0}.png",product.name))">保存图片</a>
				<input type="text" class="share_code" readonly="readonly" style="opacity: 0;position:absolute;bottom:-100px;" value="@share_url"/>
	        </div>
	    </div>
	}
		
    <div class="swiper-container">
        <div class="swiper-wrapper">
            @if (product != null && product.image_path != null && product.image_path.Count > 0) {
                foreach (var item in product.image_path) {
                    var src = domain + item;
                    <div class="swiper-slide"><img src="@src" width="100%"></div>
                }
            }
        </div>
        <div class="swiper-pagination"></div>
    </div>


    <div class="pro_detail_box">
        <div class="pro_price">
            $@product.price <del class="del_price">$@product.market_price</del>
        </div>

        <h1 class="pro_title">@product.name</h1>
        <p class="pro_txt">@product.short_description</p>

        <div class="country"><i class="icon_country"></i>来自美国 海外直邮下单需提供真实姓名和身份证号码</div>
        @if (product.product_skus != null && product.product_skus.Count > 0) {
            <div class="choice">已选： @product.product_skus[0].sku_name</div>
        }
        <div class="pro_detials" style="width:100%;">
            @Html.Raw(product.description)

        </div>
    </div>

    <div class="related">
        <h1 class="related_title">相关商品</h1>

        <ul class="related_container">
            @if (list.rows != null && list.rows.Count > 0) {
                foreach (var item in list.rows) {
                    var src = domain + item.first_image;
                    <li class="relate_item">
                        <a href="/Product/ProductDetail/@item.id">
                            <img src="@src" class="pro_list_img" />

                            <p class="relate_small_title">@(item.name.Length > 10 ? item.name.Substring(0, 10) + ".." : item.name)</p>
                            <span class="relate_price">$@item.price</span>
                        </a>
                    </li>
                }
            }


        </ul>
        <a href="javascript:;" class="look_at_more">查看更多</a>

    </div>

    <div class="shopping_car_bottom">
        <div class="shoping_car_left">
            <a href="javascript:;" onclick="collect('@product.id')" class="collection">
                <i class="icon_collection"></i> 收藏
            </a>
            <a href="/ShopCart/ShopCartList" class="shopCar">
                <i class="i_shopcar"></i> 购物车
            </a>
        </div>

        <div class="shoping_car_right">
            <a href="javascript:;" onclick="add_car(1)" class="add_car">加入购物车</a>
            <a href="javascript:;" id="buy_now" class="buy_now">立即购买</a>
        </div>
    </div>

    <!--选择商品属性-->
    <div class="property_bg"></div>
    <div class="pro_property">
        <div class="propert_tit">
            <img src="@img" class="propert_img" />
            <section class="pro_rg">
                @if (product.product_skus != null && product.product_skus.Count > 0) {
                    <h1 class="propert_price">$@product.product_skus[0].price</h1>
                    <p>已选：@product.product_skus[0].sku_name</p>
                }
            </section>
        </div>
        <div class="spec">
            <p class="spec_small_tit">规格：</p>
            <section class="spec_list">
                @if (product.product_skus != null && product.product_skus.Count > 0) {
                    for (var index = 0; index < product.product_skus.Count; index++) {
                        if (index == 0) {
                            <span class="active">@product.product_skus[index].sku_name</span>
                        } else {
                            <span>@product.product_skus[index].sku_name</span>
                        }
                    }
                }
            </section>
        </div>

        <div class="number">
            <p class="spec_small_tit" style="float: left;">数量：</p>
            <div class="plussub" style="float: left;">
                <span onclick="sub(1)" class="sub">-</span>
                <input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1">
                <span onclick="plus(1)" class="plus">+</span>
            </div>
            <div class="clear" style="clear:both;"></div>
        </div>

        <p class="remark"></p>

        <div class="shoping_car_right" style="width:100%;">
            <a href="javascript:;" onclick="add_car(0)" class="add_car">加入购物车</a>
            <a href="javascript:;" id="sku_buy_now" class="buy_now">立即购买</a>
        </div>
    </div>

    <script src="~/Content/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="~/Content/js/web.js"></script>
	<script type="text/javascript" src="~/Content/js/jquery.base64.js"></script>
    <script type="text/javascript">
		var base64 = $.base64;
        $(document).ready(function () {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                autoplay: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                }
            });
            var product = @Html.Raw(Json.Encode(product.product_skus));

            //分享按钮事件加载
            $('.fx').click(function () {
                $('.black').show();
                $('.popFx').animate({ bottom: "0" });
            });
            $('.close,.black').click(function () {
                $('.popFx').animate({ bottom: "-100%" });
                $('.black').hide();
            })

            //选择商品规格
            $(".spec_list span").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var txt = $(".pro_rg p").text();

                if (product.length > 0) {
                    for (var i = 0; i < product.length; i++) {
                        if (product[i].sku_name == this.innerText) {
                            $(".pro_rg p").html("已选："+product[i].sku_name);
                            $(".propert_price").html(product[i].price.toFixed(2));
                        }
                    }
                }
            });

			$('.j-copy').click(function(){
                var ccc= $('.share_code').select(); // 选择对象  
                document.execCommand("Copy"); // 执行浏览器复制命令 
				layer.msg("复制成功");
            });

            //弹出层
            $(".choice").click(function () {
                $(".property_bg").show();
                $(".pro_property").animate({
                    "bottom": '0'
                })
            });
            //关闭
            $(".property_bg").click(function () {
                $(this).hide();
                $(".pro_property").animate({
                    "bottom": '-350px'
                })
            });
			$("#sku_buy_now").click(function () {
                var list = new Array();
                var sku_id = GetSkuId($(".pro_rg p").text().substring(3));
                list.push({ merchantid: '@product.merchant_id', productid: '@product.id', skuid: sku_id, quantity: $(".yzquantity1").val() });
                var model = base64('encode', JSON.stringify(list));
                window.location.href = "/CheckOut/FirmOrder?model=" + model;
            });

            $("#buy_now").click(function () {
                var list = new Array();
                list.push({ merchantid: '@product.merchant_id', productid: '@product.id', quantity: $(".yzquantity1").val() });
                var model = base64('encode', JSON.stringify(list));
                window.location.href = "/CheckOut/FirmOrder?model=" + model;
            });
        });
        /*增加或删除数量*/
        function sub(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            if (yzquantity > 0) {
                if (yzquantity == 1) {
                    layer.msg("已到达最小数量！");
                    return;
                }
                yzquantity--;
                $(".yzquantity" + psid).val(yzquantity);
            } else {
                layer.msg("请输入有效数量！");
            }
        }

        function plus(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            if (yzquantity > 0) {
                yzquantity++;
                $(".yzquantity" + psid).val(yzquantity);
            } else {
                layer.msg("请输入有效数量！");
            }
        }
        function GetSkuId(name) {
            var product = @Html.Raw(Json.Encode(product.product_skus));
            var id = 0;
            if (product.length > 0) {
                for (var i = 0; i < product.length; i++) {
                    if (product[i].sku_name == name) {
                        id = product[i].id;
                        break;
                    }
                }
            }
            return id;
        }
        function yzquantity(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            var reg = /^[0-9]*$/;
            reg.test(yzquantity);
            if (reg.test(yzquantity) == false) {
                layer.msg("请输入有效数量！");
                $(".yzquantity" + psid).val(yzquantity);
            }
        }
        //加入购物车
        function add_car(type) {
			var sku_id = type>0? GetSkuId($(".pro_rg p").text().substring(3)):type;
			var options={
				url:"/ShopCart/AddCar",
				data:{  ProductId: '@product.id', SkuId: sku_id, Quantity: $(".yzquantity1").val() },
				success_msg:"添加成功",
				fail_msg:"添加失败"
			};
			ajax(options);
        }
		//收藏
        function collect(id) {
			var options ={
				url:"/Product/Collect",
				data:{ProductId: id},
				success_msg:"收藏成功",
				fail_msg:"收藏失败",
				action:"tips"
			};
			ajax(options);
        }
    </script>
</body>

</html>